<template>
    <a-layout-header class="header">
        <div class="logo" />
        <div style="float: right; color: white;">
            您好：{{member.mobile}} &nbsp;&nbsp;
            <router-link to="/login">
                退出登录
            </router-link>
        </div>
        <a-menu
            v-model:selectedKeys="selectedKeys"
            theme="dark"
            mode="horizontal"
            :style="{ lineHeight: '64px' }"
        >
            <a-menu-item key="/welcome">
                <router-link to="/welcome">
                    <HomeOutlined />&nbsp;欢迎
                </router-link>
            </a-menu-item>
            <a-menu-item key="/passenger">
                <router-link to="/passenger">
                    <UserOutlined />&nbsp;乘车人管理
                </router-link>
            </a-menu-item>
            <a-menu-item key="/ticket">
                <router-link to="/ticket">
                    <user-outlined /> &nbsp; 余票查询
                </router-link>
            </a-menu-item>
            <a-menu-item key="/my-ticket">
                <router-link to="/my-ticket">
                    <user-outlined /> &nbsp; 我的车票
                </router-link>
            </a-menu-item>

        </a-menu>
    </a-layout-header>
</template>

<script>
import {defineComponent, ref, watch} from 'vue';
import store from "@/store"
import router from "@/router";

export default defineComponent({
    name: "the-header-view",
    setup() {
        let member = store.state.member;
        const selectedKeys = ref([])

        watch(() => router.currentRoute.value.path, (newValue) => {
            console.log('watch', newValue);
            selectedKeys.value = [];
            selectedKeys.value.push(newValue)
        },{immediate: true});

        return {
            member,
            selectedKeys
        };
    },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
